<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>纯js验证码插件代码下载 - 站长素材</title>
    <style>
        body{
            background: url("images/bg.png");
            background-position: center;
            background-size: cover;
        }
        legend{
            color:#FDFDFD;
        }
        fieldset{
            padding: 20px;
            background: #666666;
            border-radius: 10px;
            margin-top: 20px;
        }
        input{
            display: inline-block;
            height: 40px;
            background: #222222;
            vertical-align: middle;
            border: none;
            border-radius: 10px;
            border-bottom: #DDDDDD solid 2px;
            box-shadow: 0 1px 1px #FFFFFF;
            -webkit-box-shadow: 0 1px 1px #FFFFFF;
            color: #EEEEEE;
            padding-left: 10px;
        }
        .mycode{
            display: inline-block;
            width: 80px;
            height: 40px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<fieldset>
    <legend>经典模式</legend>
    <div>

        <input id="inputCode" type="text"/>

        <span id="code" class="mycode"></span>
    </div>
</fieldset>

<fieldset>
    <legend>算术题模式</legend>
    <div>

        <input id="inputCode2" type="text"/>

        <span id="code2" class="mycode"></span>
    </div>
</fieldset>

<script src="js/js.KinerCode.js"></script>
<script>
    var inp = document.getElementById('inputCode');
    var code = document.getElementById('code');

    var inp2 = document.getElementById('inputCode2');
    var code2 = document.getElementById('code2');

    var c = new KinerCode({
        len: 4,//需要产生的验证码长度
//        chars: ["1+2","3+15","6*8","8/4","22-15"],//问题模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
        chars: [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
        ],//经典模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
        question:false,//若给定词典为算数题，则此项必须选择true,程序将自动计算出结果进行校验【若选择此项，则可不配置len属性】,若选择经典模式，必须选择false
        copy: false,//是否允许复制产生的验证码
        bgColor:"",//背景颜色[与背景图任选其一设置]
        bgImg:"bg.jpg",//若选择背景图片，则背景颜色失效
        randomBg : false,//若选true则采用随机背景颜色，此时设置的bgImg和bgColor将失效
        inputArea: inp,//输入验证码的input对象绑定【 HTMLInputElement 】
        codeArea: code,//验证码放置的区域【HTMLDivElement 】
        click2refresh:true,//是否点击验证码刷新验证码
        false2refresh:true,//在填错验证码后是否刷新验证码
        validateEven : "blur",//触发验证的方法名，如click，blur等
        validateFn : function(result,code){//验证回调函数
            if(result){
                alert('验证成功');
            }else{

                if(this.opt.question){
                    alert('验证失败:'+code.answer);
                }else{
                    alert('验证失败:'+code.strCode);
                    alert('验证失败:' + code.arrCode);
                }
            }
        }
    });

    var c2 = new KinerCode({
        len: 4,//需要产生的验证码长度
        chars: ["1+2","3+15","6*8","8/4","22-15"],//问题模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
//        chars: [
//            1, 2, 3, 4, 5, 6, 7, 8, 9, 0,
//            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
//            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
//        ],//经典模式:指定产生验证码的词典，若不给或数组长度为0则试用默认字典
        question:true,//若给定词典为算数题，则此项必须选择true,程序将自动计算出结果进行校验【若选择此项，则可不配置len属性】,若选择经典模式，必须选择false
        copy: false,//是否允许复制产生的验证码
        bgColor:"",//背景颜色[与背景图任选其一设置]
        bgImg:"",//若选择背景图片，则背景颜色失效
        randomBg : true,//若选true则采用随机背景颜色，此时设置的bgImg和bgColor将失效
        inputArea: inp2,//输入验证码的input对象绑定【 HTMLInputElement 】
        codeArea: code2,//验证码放置的区域【HTMLDivElement 】
        click2refresh:true,//是否点击验证码刷新验证码
        false2refresh:true,//在填错验证码后是否刷新验证码
        validateEven : "blur",//触发验证的方法名，如click，blur等
        validateFn : function(result,code){//验证回调函数
            if(result){
                alert('验证成功');
            }else{

                if(this.opt.question){
                    alert('验证失败:'+code.answer);
                }else{
                    alert('验证失败:'+code.strCode);
                    alert('验证失败:' + code.arrCode);
                }
            }
        }
    });

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>